﻿@{
    ViewBag.Title = "Terminal";
}

<style type="text/css">
    html {
        overflow: auto !important; 
        /*height: auto !important;*/
       
    }
    body {
        background: #fff !important;
        overflow: auto !important; 
        min-width: 1240px; 
        height: auto;
    }
    .terminal {
        width: 100%;
        height: auto;
        min-width: 1157px;
        background: #fff;
    }
    .head {
        max-width: 1200px;
        width: auto;
        height: 35px;
        line-height: 35px;        
        /*margin: 0px 0 40px 65px;*/
        /*padding-top: 20px;*/
        padding: 20px;
        margin: 0 auto;
    }
        .head p {
            padding: 0 15px;
            color: #9FAFC4;
            font-size: 12px;
            background-color: #E4EAF5;
            display: inline-block;
            margin: 0;
        }

    .main {
        margin: 0 auto;
        /*border: 1px solid #000;*/
        height: 500px;   
        width: 1200px;  
        /*padding: 0 20px;*/  
    }
    .main-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
    .main-title h3{
        color: #017ACD;
        margin: 0 0 0 10px;
        display: inline-block;
    }
    .merchants {
        float:right;
    }
    .merchants span{
        float: left;
    }
    .search{
        /*width: 204px;*/
        /*height: 22px;*/
        float: left;
        position: relative;
        margin-left: 10px;
    }
       
    .mini-textbox {
        overflow: visible;
        height: 26px;
        width: 150px;
        display: inline-block;
        padding: 0;
        margin: 0;
        border: 0;
        vertical-align: middle;
        position: relative;
        margin-top: 3px;
    }
    .mini-button {
        font-size: 13px;
        line-height: 16px;
        color: #333333;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        border-radius: 4px;
    }
    /*.choose {
        width: auto;
        height: 22px;
        line-height: 22px;
        color:  #333333;
        font-size: 14px;
    }*/
    .main-table {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }
    .table-title {
        width: 100%;
        height: auto;
        background-color: #EEF3F9;
    }
    .table-head {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #D9D9D9;
        border-top: 1px solid #D9D9D9;
    }
        .table-head th {
            padding: 15px 0;
        }
    .table-th1 {
        width: 55px;
    }
    .table-th2 {
        width: 280px;   
    }
    .table-th3 {
        width: 115px;   
    }
    .table-th4 {
        width: 115px;   
    }
    .table-th5 {
        width: 107px;   
    }
    .table-th6 {
        width: 220px;   
    }
    .table-th7 {
        width: 107px;   
    }

    .table-box {
        width: 100%;
        height: auto;
    }
    .table-merch {
        width: auto;
        height: 20px;
        line-height: 20px;
        padding: 15px 0;
    }
    .merch-span {
        margin-left: 9px;
    }
    .table-merch>span:nth-child(2) {
        color: #4E98CB;
        font-size: 16px;
    }
    .table-content {
        
    }
    
    .table-con {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #E6E6E6;
        border-top: 1px solid #D9D9D9;
        background-color: #FFF5EE;
        margin-bottom: 11px;
    }
    .table-content>.table-con:last-of-type{
        margin-bottom: 65px;
    }
        .table-con td {
            padding: 15px 0;
            vertical-align: top;
        }
    .con2 {
        width: 100%;
        height: auto;
        float: left;
    }
    .con3,.con4 {
        width: 100%;
        height: 17px;
        line-height: 17px;
        color: #333333;
        font-size: 13px;
        font-weight:bold;
    }
    .con5 {
        width: 100%;
        height: 17px;
        line-height: 17px;
        color: #333333;
        font-size: 13px;
    }
    .con7 {
        width: 100%;
        height: 21px;
        line-height: 21px;
        color: #333333;
        font-size: 16px;
        font-weight:bold;
    }
    .con-img {
        width: 71px;
        height: 71px;
        margin-right: 20px;
        float: left;
    }
    .con-text {
        width: 240px;
        float: left;
        color: #333333;        
    }
    .con-text span:first-child {
        display: block;
        text-align: left;
        font-size: 26px;
        font-weight:bold;
        line-height: 35px;
    }
    .con2 .con-text .span2 {
        color: #333333;
        font-size: 14px;
        line-height: 19px;
        display: block;
        width: 100%;   
        white-space: normal;
        text-align: left;
    }
    .users ,.purchase{
        margin: 0 20px 0 25px;
        float: left;
    }
    .users {
        margin-bottom: 20px;
    }
    .cartNumber {
        color: #333333;
        font-size: 12px;
        line-height: 26px;
        float: left;

    }
    .cart {
        margin-left: 15px;
        float: left;
    }
        .cart .subtract,.cart .add{
            width: 26px;
            height: 26px;
            background-color: #fff;
            border-radius: 50%;
            color: #ACACAC;
            font-size: 16px;
            line-height: 26px;
            float: left;
            cursor: pointer;
            text-align: center;
        }
        .cart .quantity {
            /*padding: 0 12px;*/
            line-height: 26px;
            color: #313131;
            font-size: 16px;
            float: left;
            width: 35px;
            background-color: #FFF5EE;
            border: none;
            text-align: center;
        }

    .chooses {
        text-align: left;
    }
        .chooses span {
            margin-left: 9px;
        }

    /*底部浮动*/
    .renewal {
        position: fixed;
        bottom: 0px;
        width: 100%;
        max-width: 1200px;
        height: 52px;
        background-color: #fff;
        border-bottom: 1px solid #E6E6E6;
        border-top: 1px solid #D9D9D9;
    }
    .renewal-p {
        line-height: 52px;
        color: #989898;
        font-size: 14px;
        float: left;
        margin: 0;
    }
    #renewal {
        width: 152px;
        height: 52px;
        background-color: #E64347;
        float: right;
        border: none;
        margin-left: 40px;
        color: #fff;
        font-size: 18px;
        font-weight:bold;
    }
    .renewal-p span{
        color: #E64347;
    }
    .check{
        float: left;
        padding: 15px 0;
        text-align: center;
        margin-left: 8px;
        margin-right: 20px;
        color: #989898;
    }
    .price {
        float: right;
        line-height: 45px;
        color: #989898;
        font-size: 14px;        
    }
    .money {
        color: #E2231A;
        font-size: 21px;
        margin-left: 25px;
    }

    .purchase {
        float: right;
        margin: 11px 10px;
    }
    .quantity {
        width: 46px !important;
        height: 26px !important;
        border: 1px solid #cacbcb !important;
        background-color: #fff !important;
        padding: 0;
    }
    .subtract,.add {
        border: 1px solid #cacbcb;
        border-radius: 0 !important;
        color: #333 !important;
    }
</style>

<div class="terminal">   
    <div class="head">
       <p>提示：选择应用，修改用户数量和年限，然后进行续费。如要续费的应用不在列表中，请在应用中心进行选购。</p>
    </div>
    <div class="main">
        <div class="main-title">
            <h3>已选应用</h3>
@*            <div class="merchants">
                <span>应用名称</span>
                <div class="search">
                    <input class="mini-textbox" emptytext="输入要搜索的应用名称" width ="150px" id ="FSearchKey" name = "FSearchKey" />
                    <a class="mini-button" iconCls="icon-search" onclick="search()" plain="true">搜索</a>
                </div>
            </div>*@
        </div>
        <div class="main-table">
            <div class="table-title">
                <table class="table-head">
                    <tbody>
                        <tr>
                            <th class="table-th1">
                                <span>
                                    <input type="checkbox" onclick="Checkbox()" checked />
                                </span>
                                <span>全选</span>
                            </th>
                            <th class="table-th2">应用名</th>
                            <th class="table-th3">注册时间</th>
                            <th class="table-th4">到期时间</th>
                            <th class="table-th5">单价</th>
                            <th class="table-th6">数量</th>
                            <th class="table-th7">小计</th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-box">
                <!--<div class="table-merch table-th1">
                   <span class="merch-span">
                        <input type="checkbox" />
                    </span>
                    <span>商户A</span>
                </div>-->
                <div class="table-content">
                    @{
                        System.Data.DataTable dtAppInfo = (@ViewBag.AppInfo as System.Data.DataTable);
                        if (dtAppInfo != null)
                        {
                            foreach (System.Data.DataRow dr in dtAppInfo.Rows)
                            {
                                if (@dr["FAppType"].ToString() == "1")
                                {
                                    <table class="table-con" FAppType="@dr["FAppType"].ToString()">
                                        <tbody FItemID="@dr["FItemID"].ToString()">
                                            <tr>
                                                <td class="table-th1 chooses">
                                                    <span>
                                                        <input type="checkbox" checked onclick="Amount()" />
                                                    </span>
                                                </td>
                                                <td  class="table-th2">
                                                    <div class="con2">
                                                        <img class="con-img" src="../Images/@dr["FImage"].ToString()">
                                                        <div class="con-text">
                                                            <span>@dr["FName"].ToString()</span>
                                                            <p class="span2">@dr["FExplain"].ToString()</p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td  class="table-th3">
                                                    <div class="con3">@dr["FRegDate"].ToString()</div>
                                                </td>
                                                <td class="table-th4">
                                                    <div class="con4">@dr["FEndDate"].ToString()</div>
                                                </td>
                                                <td  class="table-th5">
                                                    <div class="con5">¥ @dr["FSalesPrice"].ToString()/年</div>
                                                </td>
                                                <td class="table-th6">
                                                    <div class="con6 con6-0-0">
                                                        <div class="users">
                                                            <span class="cartNumber">并发用户</span>
                                                            <div class="cart">
                                                                <span class="subtract" onclick="IncDec(0,this,-1,@dr["FSalesPrice"].ToString())">-</span>
                                                                <input class="quantity" type="text" value="1" onblur="Blur(this,@dr["FSalesPrice"].ToString())" />
                                                                <span class="add" onclick="IncDec(0,this,1,@dr["FSalesPrice"].ToString())">+</span>
                                                            </div>
                                                        </div>                                       
                                                    </div>
                                                </td>
                                                <td  class="table-th7">
                                                    <div class="con7">¥@dr["FSalesPrice"].ToString()</div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                }
                                else
                                {                                
                                    <table class="table-con" FAppType="@dr["FAppType"].ToString()">
                                        <tbody FItemID="@dr["FItemID"].ToString()">
                                            <tr>
                                                <td class="table-th1 chooses">
                                                    <span>
                                                        <input class="" type="checkbox" checked onclick="Amount()" />
                                                    </span>
                                                </td>
                                                <td  class="table-th2">
                                                    <div class="con2">
                                                        <img class="con-img" src="../Images/@dr["FImage"].ToString()">
                                                        <div class="con-text">
                                                            <span>@dr["FName"].ToString()</span>
                                                            <p class="span2">@dr["FExplain"].ToString()</p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td  class="table-th3">
                                                    <div class="con3">@dr["FRegDate"].ToString()</div>
                                                </td>
                                                <td class="table-th4">
                                                    <div class="con4">@dr["FEndDate"].ToString()</div>
                                                </td>
                                                <td  class="table-th5">
                                                    <div class="con5">¥ @dr["FSalesPrice"].ToString()/年</div>
                                                </td>
                                                <td class="table-th6">
                                                    <div class="con6">
                                                        <div class="users">
                                                            <span class="cartNumber" style="margin-left: 97px;">不限</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td  class="table-th7">
                                                    <div class="con7">¥ @dr["FSalesPrice"].ToString()</div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                }
                            }
                        }
                    }
                    <div class="renewal">
                        <div class="table-th1 check">
                            <span>
                                <input type="checkbox" onclick="Checkbox()" checked/>
                            </span>
                            <span>全选</span>
                        </div>                       
                        <p class="renewal-p">已选择<span>2</span>件商品</p>                        
                        <input id="renewal" type="button" value="去续费" onclick="renewal()" />
                        <span class="price">总价:<span class="money">¥2316.00</span></span>
                        <div class="purchase">
                            <span class="cartNumber" >续费年限</span>
                            <div class="cart">
                                <span class="subtract" onclick="IncDec(1,this,-1,0)">-</span>
                                <input class="quantity" id="time" type="text" value="1" onblur="Blur(this,0)" />
                                <span class="add" onclick="IncDec(1,this,1,0)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
</div>


<script type="text/javascript">
    var nuit = 0;
    var price = 0;
    var M = 0;
    var fals = false;

    //var shopCart = new Object();
    var shopCart = {};

    $(function () {
        Amount();

        var table = $('.table-con');
        var tableNumber = table.length;
        console.log(tableNumber, $('.renewal-p').find('span')[0].innerText)
        $('.renewal-p').find('span')[0].innerText = tableNumber;
       
        //console.log(shopCart);
    })

    function long() {

    }

    //点击增减数量
    function IncDec(id, self, amount, price) {

        var input = $(self).parent().find('.quantity');
        var num = $(input).val();//当前的数量
        var number = amount + parseInt(num);//数量的变化

        if (id == 0) {
            var dd = $(self).parent().parent().parent().parent();//当前的td框
            var tbody = $(dd).parent().parent();//当前的tbody框
            var Checkbox = $(tbody).find('input[type=checkbox]'); //获取当前的应用的复选框
            var td = $(tbody).find('.con7');

            //判断当前复选框是否被勾选 true -> 勾选 false -> 没勾选
            if ($(Checkbox)[0].checked == false) {
                alert("请勾选需要结账的商品");
                return;
            }

            //判断当前数量，不小于1可加减
            if (number <= 0) {
                number = 1;
                input.val(number);
                return;
            }
            input.val(number);//数量的变化
            nuit = (number * price);//每个应用下每个cart的总价
            $(td)[0].innerText = "¥" + nuit;//当前应用的价格

            console.log();

        } else {
            //判断当前数量，不小于1可加减
            if (number <= 0) {
                number = 1;
                input.val(number);
                return;
            }
            input.val(number);//数量的变化
        }
        //console.log('M', M);
        Amount();

        return nuit;
    }

    //复选框的全选
    function Checkbox() {
        if (fals) {
            $('input[type=checkbox]').prop('checked', true);
            Amount();
            fals = false;
        } else {
            $('input[type=checkbox]').prop('checked', false);
            Amount();
            fals = true;
        }
    }
    //搜索
    function search() {

    }
    //获取焦点
    function Blur(self, price) {
        if (price != 0) {
            var number = $(self).val();//当前input的数量
            var dd = $(self).parent().parent().parent().parent();//当前的td框
            var tbody = $(dd).parent().parent();//当前的tbody框
            var td = $(tbody).find('.con7');

            nuit = number * price;
            $(td)[0].innerText = "¥" + nuit;//当前应用的价格
        }

        Amount();
    }

    //总金额
    function Amount() {
        var checkbox = $('.table-con').find('input[type=checkbox]');//获取所有的tbody中的checkbox
        var num = 0;//总数量
        var Money = 0;//总金额
        for (var i = 0; i < checkbox.length; i++) {
            //判断当前的checked是否等于true; true =>把tbody中所有属于true的单价相加 false=>不在任何事
            if (checkbox[i].checked == true) {
                num++;
                var tbody = $(checkbox[i]).parent().parent().parent().parent();
                var con = $(tbody).find('.con7')[0].innerText;//获取当前的单价
                var text = con.split("¥");//分割数字
                price = parseFloat(text[1]);
                Money += price;
                //console.log(Money);
            }
        }
        var time = $('#time').val();//获取当前购买的时长
        //console.log(Money);

        $('.renewal-p').find('span')[0].innerText = num; //改变当前勾选的应用数量
        $(".money")[0].innerText = "¥" + (Money * time).toFixed(2);
        M = (Money * time)
        return M;
    }
    //
    function renewal() {
        var checkbox = $('.table-con').find('input[type=checkbox]');//获取所有的tbody中的checkbox
        var time = parseInt($('#time').val());//时长
        shopCart['Times'] = time;//添加时长进对象
        shopCart['TotalAmount'] = M.toFixed(2);//添加总价进对象
        shopCart['timeUnit'] = 1;//
        var cartItems = [];//

        var tbody = $('.table-con>tbody');//获取当前总的应用数量
        var number = 0;//数量        
        
        for (var i = 0; i < tbody.length; i++) {
            //判断当前的checked是否等于true; true =>把tbody中所有属于true的单价相加 false=>不在任何事
            if (checkbox[i].checked == true) {
                var FItemID = $(tbody[i]).attr('FItemID');
                var type = $(tbody[i]).parent().attr('FAppType');
                //判断是否需要选择用户数量 0 =>不需要  1 =>需要
                if (type == 1) {
                    var input = $(tbody[i]).find('.quantity');
                    number = parseInt($(input).val());
                } else {
                    number = 1;
                }
                cartItem = {};
                cartItem.FItemID = FItemID;//每个应用对应的id
                cartItem.Number = number;//每个应用对应的数量
                //console.log(cartItem);
                cartItems.push(cartItem);
            }
            shopCart['cartItems'] = cartItems;
        }
        //var obj = JSON.stringify(shopCart);
        //console.log(obj, shopCart);
        openPayWindow(shopCart);
    }

    function openPayWindow(data) {
        //if (shopCart.TotalAmount <= 0) {
        //    mini.alert("没有选择续费的模块或续费金额不能为零.");
        //    return;
        //}
        var obj = JSON.stringify(shopCart);
        if (shopCart.TotalAmount > 0) {
            mini.open({
                url: "../appcenter/WXPay?json=" + obj,
                title: "微信支付", width: 600, height: 530,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    iframe.contentWindow.SetData(data);
                }
            });
        }
        else {
            $.post("SetPorj", { json: obj, mSystemAppID: parent.window.getSystemAppID() }, function (data) {
                var Data = mini.decode(data);
                if (Data.status == 1) {
                    mini.alert("续费成功，请重新登录！");
                }
                else {
                    mini.alert("续费失败," + Data.msg);
                }
            });
        }
    }
</script>
@*Increase or decrease*@